<template>
	<view>
		<view class="product">
			<view class="List" v-if="guaninfo">
				<view class="p-header">
					<view class="p-name">
						产品信息
					</view>
					<view class="p-status">
						<!-- 	<text v-if="guanziInfo.status == 'zz'">在租</text>
						<text v-if="guanziInfo.status == 'kx'">空闲</text> -->
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						重量
					</view>
					<view class="p-right">
						{{ guaninfo.product }}Kg
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						价格
					</view>
					<view class="p-right">
						{{ guaninfo.price }}元
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						押金
					</view>
					<view class="p-right">
						{{ guaninfo.yajin }}元
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租赁费
					</view>
					<view class="p-right">
						{{ guaninfo.rimoney }}元/30天
					</view>
				</view>
			</view>

			<view class="List" v-if="zutui">
				<view class="p-header">
					<view class="p-name">
						租用详情
					</view>
					<view class="p-status">

					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						已租天数
					</view>
					<view class="p-right">
						{{ zutui.zutianshu }}天
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租赁押金
					</view>
					<view class="p-right">
						{{ zutui.tuiya }}元
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						产生租赁费
					</view>
					<view class="p-right">
						{{ zutui.yiyongqian }}元
					</view>
				</view>
			</view>

			<view class="List" v-if="order.length != 0">
				<view class="p-header">
					<view class="p-name">
						当前在租
					</view>
					<view class="p-status">
						<text v-if="order.status == 'wc'">完成</text>
						<text v-if="order.status == 'zz'">在租</text>
					</view>
				</view>
				<view class="p-content" v-if="st == 1">
					<view class="p-left">
						客户姓名
					</view>
					<view class="p-right">
						{{ order.kename }}
					</view>
				</view>
				<view class="p-content" v-if="st == 1">
					<view class="p-left">
						客户电话
					</view>
					<view class="p-right">
						{{ order.ketel }}
					</view>
				</view>

				<view class="p-content">
					<view class="p-left">
						租借日期
					</view>
					<view class="p-right">
						{{ order.zuri }}
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租借押金
					</view>
					<view class="p-right">
						{{ order.yajin }}元
					</view>
				</view>
				<view class="p-content" v-if="st == 1">
					<view class="p-left">
						客户地址
					</view>
					<view class="p-right">
						{{ order.keadress }}
					</view>
				</view>
				<view class="p-contents">
					<view class="p-top">
						备注
					</view>
					<view class="p-bottom">
						<view class="" v-if="order.remark">
							{{ order.remark }}
						</view>
						<view class="" v-else>
							暂无
						</view>
					</view>
				</view>
			</view>

			<u-divider text="订单列表"></u-divider>

			<block v-if="List.length != 0">
				<view class="List" v-for="(item,i) in List" :key="i">
					<view class="p-header">
						<view class="p-name">
							订单记录
						</view>
						<view class="p-status">
							<text v-if="item.status == 'wc'">完成</text>
							<text v-if="item.status == 'zz'">在租</text>
						</view>
					</view>
					<view class="p-content" v-if="st == 1">
						<view class="p-left">
							客户姓名
						</view>
						<view class="p-right">
							{{ item.kename }}
						</view>
					</view>
					<view class="p-content" v-if="st == 1">
						<view class="p-left">
							客户电话
						</view>
						<view class="p-right">
							{{ item.ketel }}
						</view>
					</view>

					<view class="p-content">
						<view class="p-left">
							租借日期
						</view>
						<view class="p-right">
							{{ item.zuri }}
						</view>
					</view>
					<view class="p-content" v-if="item.money">
						<view class="p-left">
							租借费用
						</view>
						<view class="p-right">
							{{ item.money }}
						</view>
					</view>

					<view class="p-content">
						<view class="p-left">
							归还日期
						</view>
						<view class="p-right">
							<text v-if="item.guiri">{{ item.guiri }}</text>
							<text v-else>在租</text>
						</view>
					</view>

					<view class="p-content">
						<view class="p-left">
							租借押金
						</view>
						<view class="p-right">
							{{ item.yajin }}元
						</view>
					</view>

					<view class="p-content">
						<view class="p-left">
							重量
						</view>
						<view class="p-right">
							{{ item.product }}Kg
						</view>
					</view>
					<view class="p-content">
						<view class="p-left">
							费用
						</view>
						<view class="p-right">
							{{ item.price }}元
						</view>
					</view>
					<view class="p-content" v-if="st == 1">
						<view class="p-left">
							客户地址
						</view>
						<view class="p-right">
							{{ item.keadress }}
						</view>
					</view>
					<view class="p-contents" v-if="item.remark">
						<view class="p-top">
							备注
						</view>
						<view class="p-bottom">
							<view class="" v-if="item.remark">
								{{ item.remark }}
							</view>
							<view class="" v-else>
								暂无
							</view>
						</view>
					</view>
				</view>
			</block>

		</view>
		<view class="float" @tap="show = true">
			<u-icon color="#669bf9" name="plus-circle-fill" size="55"></u-icon>
		</view>
		<u-action-sheet @select="select" @close='close' :closeOnClickOverlay="true" :closeOnClickAction="true"
			cancelText="取消" round="8" :actions="list" :title="title" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				title: '操作',
				list: [],
				show: false,
				keyword: '',
				List: [],
				guanziInfo: '',
				order: '',
				page: 1,
				zutui: '',
				type: '',
				guaninfo: '',
				st: 0
			}
		},
		onShow() {
			this.st = uni.getStorageSync('st')
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.getdetails()
			// this.getorder()
		},
		onReachBottom() {
			this.page++
			this.getdetails()
			// this.getorder()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getdetails()
			// this.getorder()
			uni.stopPullDownRefresh()
		},
		methods: {
			getguanInfo(id) {
				this.$http.Post('cper/guanInfo', {
					order_id: id,
				}, (result) => {
					console.log(result.data, '????')
					this.guaninfo = result.data
					this.zutui = result.data.zutui
				})
			},
			getorder(id) {
				this.$http.Post('cper/orderList', {
					zguanzi_id: id,
					page: this.page
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.List = []
					}
					this.List = this.List.concat(result.data.data)
				})
			},
			getdetails() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('cper/chanInfo', {
					zguanzi_id: this.id, //产品ID
					type: this.type
				}, (result) => {
					uni.hideLoading()
					this.guanziInfo = result.data.guanziInfo
					this.order = result.data.order
					if (this.order.id) {
						this.getguanInfo(this.order.id)
					}
					this.getorder(this.guanziInfo.id)
					if (this.guanziInfo.status == 'kx') {
						this.list = [{
							name: '租借',
							color: '#669bf9',
							fontSize: '16',
							id: 0
						}, ]
					}
					if (this.guanziInfo.status == 'zz') {
						this.list = [{
								name: '换货',
								color: '#669bf9',
								fontSize: '16',
								id: 1
							},
							{
								name: '退货',
								color: '#669bf9',
								fontSize: '16',
								id: 2
							},
						]
					}
				})
			},
			tui() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('cper/guantui', {
					zguanzi_id: this.guanziInfo.id, //产品ID
				}, (result) => {
					uni.hideLoading()
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					setTimeout(res => {
						this.page = 1
						this.getdetails()
					}, 600)
				})
			},
			select(e) {
				if (e.id == 0) { //租
					uni.redirectTo({
						url: '/pages/form/hire?id=' + this.guanziInfo.id
					})
				} else if (e.id == 1) { //换
					uni.navigateTo({
						url: '/pages/form/repay?id=' + this.id + '&type=' + this.type
					})
				} else if (e.id == 2) { //退
					uni.showModal({
						title: '是否进行退货操作',
						success: (res) => {
							if (res.confirm) {
								this.tui()
							} else {

							}
						}
					})
				}
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style>
	.search {
		margin: 20rpx auto 0 auto;
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav {
		width: 80%;
		height: 100rpx;
		margin: 0rpx auto 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.List {
		margin: 20rpx auto;
		width: 94%;
		border-radius: 16rpx;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.p-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto;
		height: 90rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.p-name {
		font-weight: bold;
	}

	.p-status {
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 5rpx 12rpx;
		background-color: #f0f5fc;
		color: #669bf9;
	}

	.p-more {
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 5rpx 12rpx;
		color: #999;
		display: flex;
		align-items: center;
	}

	.p-more>text {
		padding-right: 5rpx;
	}

	.p-content {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		color: #7a7a7a;
		font-size: 30rpx;
	}

	.p-left {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.p-right {
		width: 75%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.float {
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		opacity: 0.8;
	}

	.p-contents {
		width: 94%;
		margin: 20rpx auto;
		color: #7a7a7a;
		font-size: 30rpx;
	}

	.p-top {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.p-bottom {
		padding-top: 15rpx;
	}


	textarea {
		width: 100%;
		height: auto;
		word-wrap: break-word;

	}
</style>